import Dragger from "react-dragger-r";
import Room from "../sences/Room";
import "./Tips.scss";

const tipList = [
  {
    text: "123",
  },
  {
    text: "□--△     ---- □   ○○○------ △□----- ",
  },
  {
    text: "789",
  },
  {
    text: "000",
  },
];

function RoomMain(props) {
  return (
    <div className="tips">
      <div className="container">
        {tipList.map((item, key) => {
          return (
            <Dragger key={key}>
              <div className={"tip tip" + key}>
                <div className="tip-header">●</div>
                <div className="tip-inside">{item.text}</div>
              </div>
            </Dragger>
          );
        })}
      </div>
    </div>
  );
}

export default function Tips(props) {
  const { focus, handleState, blurState } = props;
  return (
    <Room
      RoomMain={RoomMain}
      focus={focus}
      handleState={handleState}
      blurState={blurState}
    />
  );
}
